<template>
  <!-- 博客展示栏小组件 -->
  <div
    class="rounded-3xl h-[200px] w-[2300] shadow-lg backdrop-filter backdrop-blur-lg backdrop-contrast-125 p-3"
  >
    <img
      class="float-right h-[160px] w-[260px]"
      src="@/assets/Anchor-Bootstrap-UI-Kit-master/assets/img/demo/3.jpg"
      alt="图片展示"
    />
    <!-- 文章标题 -->
    <h5
      class="text-cyan-800 fst-italic cursor-pointer hover:font-mono hover:underline"
      @click="clickJumpToNewView(data.id)"
    >
      <i class="fa fa-cubes"></i>
      {{ data.title.substring(0, 28) }}....
    </h5>
    <span class="italic text-lg">
      <!-- icon sizes -->
      <i class="fa fa-leaf text-pink-300"> </i>
      {{ data.createTime.substring(0, 10) }}
    </span>
    <!-- 文章内容 -->
    <p
      class="card-text text-muted fs-6 fw-lighter lh-1 cursor-pointer hover:font-serif"
      @click="clickJumpToNewView"
    >
      {{ textShow(data.content).substring(0, 100) }}
    </p>
  </div>
</template>

<script setup>
import request from '@/utils/request.js'
function textShow(html_str) {
  var text = html_str.replace(/<[^<>]+>/g, '')
  return text
}
const getData = async (id) => {
  let res = await request({
    url: '/' + id,
    method: 'GET'
  })
}
function clickJumpToNewView(id) {
  getData(id)
  var ids = '' + id
  var u = '/src/assets/Anchor-Bootstrap-UI-Kit-master/' + ids + '.html'
  location.assign(u)
  location.assign(u)
}

defineProps({
  data: {
    type: Object,
    required: true
  }
})
</script>
<style scoped>
.fa fa-leaf {
  color: aqua;
}
</style>
